<!-- @module input-form -->
<!-- @author: YunTao.Li -->
<!-- @description: 假期排班弹出form-->
<!-- @since: 2019-11-14 12:47:36 -->
<template>
  <el-dialog title="假期排班" :visible.sync="dialogFormVisible" width="80%" top="5vh" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" @close="closeDialog">
    <el-form ref="holidayLawsInputForm" :model="holidayLawsInputForm" :label-position="labelPosition" label-width="120px" size="mini">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="组织机构" prop="ouId">
            <!-- <el-input v-model="leaveInputForm.ouId" name="ouId" placeholder="组织机构" /> -->
            <OrgSelectTree ref="orgSelectRef" v-model="holidayLawsInputForm.orgCode" placeholder="组织机构" @bindLabel="bindLabel" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="假期类型" prop="hType">
            <!-- <el-input v-model="holidayLawsInputForm.hType" name="hType" placeholder="假期类型" /> -->
            <dictCombo v-model="holidayLawsInputForm.hType" dicttypeid="holidayLawType" name="hType" placeholder="假期类型" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="开始日期" prop="startDate">
            <el-date-picker v-model="holidayLawsInputForm.startDate" style="width:100%;" type="date" name="startDate" placeholder="开始日期" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="结束日期" prop="endDate">
            <el-date-picker v-model="holidayLawsInputForm.endDate" style="width:100%;" type="date" name="endDate" placeholder="结束日期" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="说明" prop="hDesc">
            <el-input v-model="holidayLawsInputForm.hDesc" name="hDesc" placeholder="说明" type="textarea" :rows="3" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="onCancel">取 消</el-button>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import OrgSelectTree from './../combo/org-tree-select.vue'
import dictCombo from '@/views/attendance/components/combo/dict-comb'

export default {
  components: { OrgSelectTree, dictCombo },
  data() {
    return {
      dialogFormVisible: false,
      labelPosition: 'right',
      holidayLawsInputForm: {
        holidayId: '',
        ouId: '',
        orgCode: '',
        orgName: '',
        year: '',
        hDate: new Date(),
        hType: '',
        startDate: new Date(),
        endDate: new Date(),
        days: '',
        batchId: '',
        hDesc: ''
      },
      formLabelWidth: '120px'
    }
  },
  mounted() {
    try {
      this.holidayLawsInputForm.orgCode = localStorage.getItem('orgCode')
    } catch (e) {
      console.log(e)
    }
  },
  methods: {
    bindLabel(orgId, label) {
      if (orgId && orgId !== '') {
        this.holidayLawsInputForm.ouId = orgId
      }

      if (label && label !== '') {
        this.holidayLawsInputForm.orgName = label
      }
    },
    toggele(data) { // 显示此窗口或隐藏
      if (this.dialogFormVisible) {
        this.dialogFormVisible = false
      } else {
        this.dialogFormVisible = true
      }

      if (data && data != null) {
        this.$nextTick(function() {
          this.holidayLawsInputForm = data
        })
      }
    },
    onCancel() { // 取消
      this.toggele()
      this.resetFormData()
    },
    onSubmit() { // 保存
      this.dialogFormVisible = false
      this.$emit('submitFunc', this.holidayLawsInputForm)
    },
    closeDialog() {
    },
    resetFormData() {
      this.$refs.holidayLawsInputForm.resetFields()
      this.holidayLawsInputForm = {
        holidayId: '',
        ouId: '',
        orgCode: '',
        orgName: '',
        year: '',
        hDate: new Date(),
        hType: '',
        startDate: new Date(),
        endDate: new Date(),
        days: '',
        batchId: '',
        hDesc: ''
      }
      this.holidayLawsInputForm.orgName = ''
      this.$refs.orgSelectRef.clearHandle()
    }
  }
}
</script>

<style>
/* .el-date-picker{
  width: 80%
} */
</style>
